<template lang="jade">
	div(class="panel panel-default",v-if="property.name")
		div(class="panel-heading")
			h3(class="panel-title") 编辑属性-{{property.name}}
		div(class="panel-body")
			input(
				class="form-control",
				type="text",
				@keyup.enter="add"
				v-model="propertyItem.name"
				placeholder="请输入属性值，按回车键添加")

		ul(class="list-group", v-if="property.items.length>0")
			li(class="list-group-item",v-for="item in property.items")
				div(class="input-group")
					input(
						class="form-control",
						type="text",
						placeholder="请输入属性名称",
						v-model="item.name")
					span(class="input-group-btn")
						button(class="btn btn-danger", type="button", @click="removePropertyItem(item)")
							i(class="glyphicon glyphicon-trash", title="删除")
						
						button(class="btn btn-default", type="button", disabled, v-if="item.isDefault")
							i(class="el-icon-menu", title="当前默认属性值")
							span 当前默认属性值
						button(class="btn btn-primary", type="button", @click="set_default(item)", v-else)
							i(class="el-icon-setting", title="设为默认属性值")
							span 设为默认属性值
</template>
<script type="text/javascript">
	import Property from '../models/property';
	import PropertyItem from '../models/property-item';
	import ProductType from '../models/product-type';
	import Collection from '../models/collection';
	import {request} from 'collection';

	export default {
		data(){
			return {
				propertyItem: new PropertyItem,
				propertyItemCollection: new Collection()
			}
		}, 

		props:{property: {type: Property, default: new Property}},

		model: {
			prop: 'property',
			event:'update'
		},

		watch: {
			property: function(val){
				this.propertyItemCollection = new Collection(val.items);
			}
		},

		methods:{
			add(){
				 this.propertyItemCollection.add(this.propertyItem);
				 this.propertyItem = new PropertyItem();
			},
			removePropertyItem(item){
				this.propertyItemCollection.remove(item);
			},
			save(){
				this.$emit('save', this.property);
			},
			set_default(item){
				_.each(this.property.items, (cItem)=>{cItem.isDefault=false});
				item.isDefault=true;
			}
		},

		created(){ 
			this.propertyItemCollection = new Collection(this.property.items);
		}
	}
</script>
<style type="text/css" lang="scss">
	.property-item-list{
		border:1px dashed #eaeaea;
		padding: 10px ;
		margin:10px 0;
	}
</style>